<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #FFF9F0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            background-color: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
            color: #FF6700;
            margin-right: 12px;
        }
        
        .title {
            font-size: 16px;
            color: #333;
        }
        
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px 0;
        }
        
        .container {
            width: 60%;
            max-width: none;
            margin: 0 auto;
            padding: 25px;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .form-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .form-title {
            font-size: 22px;
            color: #333;
            margin-bottom: 25px;
            text-align: center;
            font-weight: 500;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        .input-label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-size: 15px;
            font-weight: 500;
        }
        
        .input-row {
            display: flex;
            align-items: center;
        }
        
        .input-field {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 15px;
            margin-right: 10px;
        }
        
        .input-field:focus {
            border-color: #FF6700;
            outline: none;
        }
        
        .verify-btn {
            padding: 12px 20px;
            background-color: #f5f5f5;
            color: #666;
            border: none;
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
            white-space: nowrap;
            position: relative;
        }
        
        .verify-btn:disabled {
            background-color: #f5f5f5;
            color: #ccc;
            cursor: not-allowed;
        }
        
        .next-btn {
            width: 100%;
            padding: 12px;
            background-color: #FF6700;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            margin-top: 20px;
        }
        
        .error-message {
            color: #ff4d4f;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .success-message {
            color: #52c41a;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .footer {
            flex-shrink: 0;
            text-align: center;
            color: #999;
            font-size: 11px;
            padding: 15px;
            margin-top: auto;
        }
        
        .footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 12px;
        }
        
        .footer-link {
            color: #666;
            text-decoration: none;
            margin: 0 8px;
            font-size: 11px;
            white-space: nowrap;
        }
        
        .footer-link:hover {
            color: #FF6700;
        }
        
        /* 验证弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none;
        }
        
        .modal-content {
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            width: 350px;
            max-width: 90%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .modal-title {
            font-size: 18px;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }
        
        .captcha-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .captcha-canvas {
            border: 1px solid #ddd;
            margin-bottom: 15px;
            border-radius: 4px;
        }
        
        .captcha-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            margin-bottom: 15px;
        }
        
        .captcha-input:focus {
            border-color: #FF6700;
            outline: none;
        }
        
        .modal-buttons {
            display: flex;
            justify-content: space-between;
        }
        
        .modal-btn {
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .cancel-btn {
            background-color: #f5f5f5;
            color: #666;
            border: none;
        }
        
        .confirm-btn {
            background-color: #FF6700;
            color: white;
            border: none;
        }
        
        .status-icon {
            margin-left: 8px;
            display: inline-block;
            width: 16px;
            height: 16px;
        }
        
        .loading-icon {
            border: 2px solid #f3f3f3;
            border-top: 2px solid #FF6700;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            animation: spin 1s linear infinite;
        }
        
        .success-icon {
            color: #52c41a;
            font-size: 16px;
        }
        
        .error-icon {
            color: #ff4d4f;
            font-size: 16px;
        }
        
        .refresh-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 12px;
            margin-top: 5px;
            display: flex;
            align-items: center;
        }
        
        .refresh-icon {
            margin-right: 5px;
            font-size: 14px;
        }
        
        .countdown {
            color: #666;
            font-size: 12px;
            margin-top: 5px;
        }
        
        /* 验证码输入框样式 */
        .code-input-group {
            margin-top: 20px;
            display: none; /* 初始隐藏 */
        }
        
        /* 密码输入框样式 */
        .password-input-group {
            margin-top: 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">商城</div>
        <div class="title">找回密码</div>
    </div>
    
    <div class="main-content">
        <div class="container">
            <div class="form-wrapper">
                <div class="form-title">找回密码</div>
                
                <form id="passwordForm">
                    <div class="input-group">
                        <label for="account" class="input-label">请输入邮箱</label>
                        <div class="input-row">
                            <input type="email" id="account" class="input-field" placeholder="请输入邮箱">
                            <button type="button" id="verifyBtn" class="verify-btn" disabled>点击进行验证</button>
                        </div>
                        <div id="emailError" class="error-message">请输入有效的邮箱地址</div>
                    </div>
                    
                    <!-- 验证码输入区域 - 初始隐藏 -->
                    <div class="input-group code-input-group" id="codeInputGroup">
                        <label for="verifyCode" class="input-label">请输入邮箱验证码</label>
                        <div class="input-row">
                            <input type="text" id="verifyCode" class="input-field" placeholder="请输入6位验证码">
                            <button type="button" id="sendCodeBtn" class="verify-btn">获取验证码</button>
                        </div>
                        <div id="codeError" class="error-message"></div>
                        <div id="codeSuccess" class="success-message"></div>
                        <div id="countdown" class="countdown"></div>
                    </div>
                    
                    <!-- 新密码输入区域 - 初始显示 -->
                    <div class="input-group password-input-group" id="passwordInputGroup">
                        <label for="newPassword" class="input-label">请输入新密码</label>
                        <input type="password" id="newPassword" class="input-field" placeholder="请输入新密码">
                        <div id="passwordError" class="error-message"></div>
                        
                        <label for="confirmPassword" class="input-label" style="margin-top: 15px;">确认新密码</label>
                        <input type="password" id="confirmPassword" class="input-field" placeholder="请再次输入新密码">
                        <div id="confirmPasswordError" class="error-message"></div>
                    </div>
                    
                    <button type="submit" class="next-btn" id="submitBtn" disabled>下一步</button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="footer">
        <div class="footer-links">
            <a href="#" class="footer-link">关于我们</a>
            <a href="#" class="footer-link">联系我们</a>
            <a href="#" class="footer-link">人才招聘</a>
            <a href="#" class="footer-link">商家入驻</a>
            <a href="#" class="footer-link">广告服务</a>
            <a href="#" class="footer-link">手机商城</a>
            <a href="#" class="footer-link">友情链接</a>
        </div>
    </div>

    <!-- 验证码弹窗 -->
    <div class="modal-overlay" id="captchaModal">
        <div class="modal-content">
            <div class="modal-title">人机验证</div>
            <div class="captcha-container">
                <canvas id="captchaCanvas" width="300" height="80" class="captcha-canvas"></canvas>
                <button class="refresh-btn" id="refreshBtn">
                    <span class="refresh-icon">↻</span> 换一张
                </button>
                <input type="text" class="captcha-input" id="captchaInput" placeholder="请输入上方验证码">
                <div id="captchaError" class="error-message" style="display: none;">验证码错误，请重新输入</div>
            </div>
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" id="cancelBtn">取消</button>
                <button class="modal-btn confirm-btn" id="confirmBtn">确认</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const emailInput = document.getElementById('account');
            const verifyBtn = document.getElementById('verifyBtn');
            const emailError = document.getElementById('emailError');
            const captchaModal = document.getElementById('captchaModal');
            const captchaCanvas = document.getElementById('captchaCanvas');
            const captchaInput = document.getElementById('captchaInput');
            const captchaError = document.getElementById('captchaError');
            const cancelBtn = document.getElementById('cancelBtn');
            const confirmBtn = document.getElementById('confirmBtn');
            const refreshBtn = document.getElementById('refreshBtn');
            const codeInputGroup = document.getElementById('codeInputGroup');
            const verifyCodeInput = document.getElementById('verifyCode');
            const sendCodeBtn = document.getElementById('sendCodeBtn');
            const codeError = document.getElementById('codeError');
            const codeSuccess = document.getElementById('codeSuccess');
            const countdownEl = document.getElementById('countdown');
            const passwordInputGroup = document.getElementById('passwordInputGroup');
            const newPasswordInput = document.getElementById('newPassword');
            const confirmPasswordInput = document.getElementById('confirmPassword');
            const passwordError = document.getElementById('passwordError');
            const confirmPasswordError = document.getElementById('confirmPasswordError');
            const submitBtn = document.getElementById('submitBtn');
            const ctx = captchaCanvas.getContext('2d');
            
            // 邮箱验证正则表达式
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            
            // 当前验证码
            let currentCaptcha = '';
            let countdown = 0;
            let countdownInterval = null;
            let isHumanVerified = false;
            
            // 实时验证邮箱格式
            emailInput.addEventListener('input', function() {
                const email = emailInput.value.trim();
                
                if (email === '') {
                    verifyBtn.disabled = true;
                    emailError.style.display = 'none';
                } else if (!emailRegex.test(email)) {
                    verifyBtn.disabled = true;
                    emailError.style.display = 'block';
                } else {
                    verifyBtn.disabled = false;
                    emailError.style.display = 'none';
                }
            });
            
            // 生成随机验证码（数字+字母）
            function generateCaptcha() {
                const chars = '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ';
                let captcha = '';
                for (let i = 0; i < 6; i++) {
                    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return captcha;
            }
            
            // 绘制验证码（带扭曲效果和干扰元素）
            function drawCaptcha(captcha) {
                // 清除画布
                ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height);
                
                // 设置背景色
                ctx.fillStyle = '#f8f8f8';
                ctx.fillRect(0, 0, captchaCanvas.width, captchaCanvas.height);
                
                // 绘制干扰线
                for (let i = 0; i < 8; i++) {
                    ctx.strokeStyle = getRandomColor(100, 200);
                    ctx.beginPath();
                    ctx.moveTo(
                        Math.random() * captchaCanvas.width,
                        Math.random() * captchaCanvas.height
                    );
                    ctx.lineTo(
                        Math.random() * captchaCanvas.width,
                        Math.random() * captchaCanvas.height
                    );
                    ctx.stroke();
                }
                
                // 绘制噪点
                for (let i = 0; i < 100; i++) {
                    ctx.fillStyle = getRandomColor(100, 200);
                    ctx.fillRect(
                        Math.random() * captchaCanvas.width,
                        Math.random() * captchaCanvas.height,
                        1,
                        1
                    );
                }
                
                // 绘制验证码文本
                for (let i = 0; i < captcha.length; i++) {
                    // 设置字体样式
                    ctx.font = 'bold 28px Arial';
                    ctx.fillStyle = getRandomColor(50, 150);
                    
                    // 计算字符位置
                    const x = 30 + i * 40;
                    const y = 50;
                    
                    // 保存当前状态
                    ctx.save();
                    
                    // 移动原点
                    ctx.translate(x, y);
                    
                    // 添加随机旋转和扭曲
                    const rotate = (Math.random() - 0.5) * 0.4;
                    const skewX = (Math.random() - 0.5) * 0.8;
                    const scaleY = 0.8 + Math.random() * 0.4;
                    
                    // 应用变换
                    ctx.rotate(rotate);
                    ctx.transform(1, skewX, 0, scaleY, 0, 0);
                    
                    // 绘制字符
                    ctx.fillText(captcha[i], 0, 0);
                    
                    // 恢复状态
                    ctx.restore();
                }
                
                // 添加波浪形干扰线
                ctx.strokeStyle = getRandomColor(150, 200);
                ctx.beginPath();
                for (let x = 0; x < captchaCanvas.width; x++) {
                    const y = 40 + Math.sin(x / 20) * 10;
                    if (x === 0) {
                        ctx.moveTo(x, y);
                    } else {
                        ctx.lineTo(x, y);
                    }
                }
                ctx.stroke();
            }
            
            // 生成随机颜色
            function getRandomColor(min, max) {
                const r = min + Math.floor(Math.random() * (max - min));
                const g = min + Math.floor(Math.random() * (max - min));
                const b = min + Math.floor(Math.random() * (max - min));
                return `rgb(${r}, ${g}, ${b})`;
            }
            
            // 初始化验证码
            function initCaptcha() {
                currentCaptcha = generateCaptcha();
                drawCaptcha(currentCaptcha);
            }
            
            // 开始倒计时
            function startCountdown(seconds) {
                clearInterval(countdownInterval);
                countdown = seconds;
                sendCodeBtn.disabled = true;
                
                updateCountdownText();
                
                countdownInterval = setInterval(function() {
                    countdown--;
                    updateCountdownText();
                    
                    if (countdown <= 0) {
                        clearInterval(countdownInterval);
                        sendCodeBtn.disabled = false;
                        sendCodeBtn.textContent = '重新获取';
                        countdownEl.textContent = '';
                    }
                }, 1000);
            }
            
            // 更新倒计时文本
            function updateCountdownText() {
                countdownEl.textContent = `${countdown}秒后可重新获取`;
            }
            
            // 发送验证码到邮箱
            function sendVerificationCode(email) {
                // 显示加载状态
                sendCodeBtn.innerHTML = '发送中<span class="status-icon loading-icon"></span>';
                sendCodeBtn.disabled = true;
                
                // 准备请求数据
                var myHeaders = new Headers();
                myHeaders.append("Content-Type", "application/json");
                
                var raw = JSON.stringify({
                    "mail": email
                });
                
                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };
                
                // 调用API发送验证码
                fetch("/api/v1/public/send_verifyCode_by_email", requestOptions)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('发送验证码失败');
                        }
                        return response.json();
                    })
                    .then(result => {
                        // 发送成功
                        sendCodeBtn.innerHTML = '获取验证码';
                        codeError.style.display = 'none';
                        codeSuccess.style.display = 'block';
                        codeSuccess.textContent = '验证码已发送至您的邮箱，请查收';
                        
                        // 开始60秒倒计时
                        startCountdown(60);
                    })
                    .catch(error => {
                        // 发送失败
                        sendCodeBtn.innerHTML = '获取验证码';
                        sendCodeBtn.disabled = false;
                        codeSuccess.style.display = 'none';
                        codeError.style.display = 'block';
                        codeError.textContent = error.message || '发送验证码失败，请稍后重试';
                    });
            }
            
            // 验证按钮点击事件 - 显示验证码弹窗
            verifyBtn.addEventListener('click', function() {
                // 生成新验证码
                initCaptcha();
                
                // 重置输入和错误状态
                captchaInput.value = '';
                captchaError.style.display = 'none';
                
                // 显示弹窗
                captchaModal.style.display = 'flex';
            });
            
            // 刷新验证码
            refreshBtn.addEventListener('click', function() {
                initCaptcha();
                captchaInput.value = '';
                captchaError.style.display = 'none';
            });
            
            // 取消按钮点击事件
            cancelBtn.addEventListener('click', function() {
                captchaModal.style.display = 'none';
            });
            
            // 确认按钮点击事件 - 验证验证码
            confirmBtn.addEventListener('click', function() {
                const userInput = captchaInput.value.trim().toUpperCase();
                
                if (!userInput) {
                    captchaError.textContent = '请输入验证码';
                    captchaError.style.display = 'block';
                    return;
                }
                
                // 显示加载状态
                verifyBtn.innerHTML = '验证中<span class="status-icon loading-icon"></span>';
                verifyBtn.disabled = true;
                
                // 模拟验证过程
                setTimeout(function() {
                    if (userInput === currentCaptcha) {
                        // 验证成功
                        verifyBtn.innerHTML = '已验证<span class="status-icon success-icon">✓</span>';
                        verifyBtn.style.backgroundColor = '#f6ffed';
                        verifyBtn.style.color = '#52c41a';
                        verifyBtn.style.border = '1px solid #b7eb8f';
                        verifyBtn.disabled = true;
                        
                        // 标记人机验证通过
                        isHumanVerified = true;
                        
                        // 关闭弹窗
                        captchaModal.style.display = 'none';
                        
                        // 显示验证码输入区域
                        codeInputGroup.style.display = 'block';
                        
                        // 自动发送验证码到邮箱
                        const email = emailInput.value.trim();
                        sendVerificationCode(email);
                    } else {
                        // 验证失败
                        verifyBtn.innerHTML = '点击进行验证';
                        captchaError.style.display = 'block';
                        captchaError.textContent = '验证码错误，请重新输入';
                        
                        // 生成新验证码
                        initCaptcha();
                        captchaInput.value = '';
                    }
                }, 1500);
            });
            
            // 发送验证码按钮点击事件
            sendCodeBtn.addEventListener('click', function() {
                const email = emailInput.value.trim();
                
                if (!emailRegex.test(email)) {
                    emailError.style.display = 'block';
                    return;
                }
                
                // 发送验证码
                sendVerificationCode(email);
            });
            
            // 验证码输入框变化事件
            verifyCodeInput.addEventListener('input', function() {
                const code = verifyCodeInput.value.trim();
                
                if (code.length === 6) {
                    // 验证验证码
                    verifyCode(code);
                } else {
                    submitBtn.disabled = true;
                }
            });
            
            // 验证验证码
            function verifyCode(code) {
                // 这里应该是调用验证验证码的API
                // 为了演示，我们假设验证码是"123456"时验证成功
                if (code === "123456") {
                    codeError.style.display = 'none';
                    codeSuccess.style.display = 'block';
                    codeSuccess.textContent = '验证码验证成功';
                    
                    // 检查是否可以启用提交按钮
                    checkSubmitButton();
                } else {
                    codeError.style.display = 'block';
                    codeError.textContent = '验证码错误';
                    submitBtn.disabled = true;
                }
            }
            
            // 新密码输入框变化事件
            newPasswordInput.addEventListener('input', function() {
                checkSubmitButton();
            });
            
            // 确认密码输入框变化事件
            confirmPasswordInput.addEventListener('input', function() {
                checkSubmitButton();
            });
            
            // 检查是否可以提交
            function checkSubmitButton() {
                const code = verifyCodeInput.value.trim();
                const newPassword = newPasswordInput.value.trim();
                const confirmPassword = confirmPasswordInput.value.trim();
                
                submitBtn.disabled = !(
                    code.length === 6 && 
                    newPassword.length > 0 && 
                    confirmPassword.length > 0
                );
            }
            
            // 表单提交事件
            document.getElementById('passwordForm').addEventListener('submit', function(e) {
                e.preventDefault();
                const email = emailInput.value.trim();
                const code = verifyCodeInput.value.trim();
                const newPassword = newPasswordInput.value.trim();
                const confirmPassword = confirmPasswordInput.value.trim();
                
                // 验证输入
                if (!emailRegex.test(email)) {
                    emailError.style.display = 'block';
                    return;
                }
                
                if (code.length !== 6) {
                    codeError.style.display = 'block';
                    codeError.textContent = '请输入6位验证码';
                    return;
                }
                
                if (newPassword.length === 0) {
                    passwordError.style.display = 'block';
                    passwordError.textContent = '请输入新密码';
                    return;
                }
                
                if (confirmPassword.length === 0) {
                    confirmPasswordError.style.display = 'block';
                    confirmPasswordError.textContent = '请确认新密码';
                    return;
                }
                
                if (newPassword !== confirmPassword) {
                    confirmPasswordError.style.display = 'block';
                    confirmPasswordError.textContent = '两次输入的密码不一致';
                    return;
                }
                
                // 显示加载状态
                submitBtn.innerHTML = '提交中<span class="status-icon loading-icon"></span>';
                submitBtn.disabled = true;
                
                // 准备请求数据
                var myHeaders = new Headers();
                myHeaders.append("Content-Type", "application/json");
                
                var raw = JSON.stringify({
                    "email": email,
                    "newPassword": newPassword,
                    "verifyCode": code
                });
                
                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };
                
                // 调用找回密码API
                fetch("/api/v1/user/forget/password", requestOptions)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('密码重置失败');
                        }
                        return response.json();
                    })
                    .then(result => {
                        // 提交成功
                        submitBtn.innerHTML = '下一步';
                        alert('密码重置成功，请使用新密码登录');
                        
                        // 实际应用中应该跳转到登录页面
                        // window.location.href = '/login';
                    })
                    .catch(error => {
                        // 提交失败
                        submitBtn.innerHTML = '下一步';
                        submitBtn.disabled = false;
                        alert(error.message || '密码重置失败，请稍后重试');
                    });
            });
            
            // 初始化验证码
            initCaptcha();
        });
    </script>
</body>
</html>